<template>
  <div class="center-cmp">
    <!-- 顶部装饰 -->
    <div class="cc-header">
      <dv-decoration-1 style="width:280px;height:30px;" />
      <div class="sp">视频监控</div>
      <dv-decoration-1 style="width:280px;height:30px;" />
    </div>

    <!-- 当前时间显示 -->
    <div class="time-display">{{ currentTime }}</div>

    <!-- 控制摄像头的开关按钮 -->
    <el-button type="primary" class="camera-toggle" @click="toggleCamera" size="medium" :loading="loading">
      {{ cameraActive ? '关闭摄像头' : '打开摄像头' }}
    </el-button>

    <!-- 视频流展示 -->
    <div class="video-container">
      <video ref="video" autoplay playsinline muted></video>
    </div>

    <!-- 模块区域 -->
    <div class="module-container">
      <!-- 系统状态卡片 -->
      <!-- <el-card class="module-item custom-card" :body-style="{ padding: '20px' }"
        :style="{ background: 'Transparent', border: '1px solid rgb(0, 186, 255)' }">
        <div slot="header" class="module-title">系统状态</div>
        <div class="module-value" :style="getStatusStyle()">
          {{ isSystemRunning ? '运行中' : '停止' }}
        </div>
      </el-card> -->

      <dv-border-box-10 :reverse="true"
        style="width: 250px; height: 120px; display: flex; justify-content: center; align-items: center;">
        <div class="module-item custom-card" :body-style="{ padding: '20px' }" :style="{ background: 'Transparent' }">
          <div slot="header" class="module-title" style="font-size: 1.2rem;">系统状态:</div>
          <div class="module-value" :style="getStatusStyle()">
            {{ isSystemRunning ? '运行中' : '停止' }}
          </div>
        </div>
      </dv-border-box-10>

      <!-- 网络状态卡片 -->
      <!-- <dv-border-box-12 class="module-item" :body-style="{ padding: '20px' }"
        :style="{ background: 'Transparent', weight: '100px', height: '80px' }">
        <div slot="header" class="module-title">网络状态</div>
        <div class="module-value" :style="getNetworkStatusStyle()">
          {{ isNetworkConnected ? '已连接' : '未连接' }}
        </div>
      </dv-border-box-12> -->

      <dv-border-box-10 :reverse="true"
        style="width: 250px; height: 120px; display: flex; justify-content: center; align-items: center;">
        <div class="module-item custom-card" :body-style="{ padding: '18px' }"
          :style="{ background: 'transparent', width: '90%', height: '80%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }">
          <div slot="header" class="module-title" style="font-size: 1.2rem;">网络状态:</div>
          <div class="module-value"
            :style="[getNetworkStatusStyle(), { fontSize: '1.2rem', textAlign: 'left', borderColor: 'blue', padding: '8px 0' }]">
            {{ isNetworkConnected ? '已连接' : '未连接' }}
          </div>
        </div>
      </dv-border-box-10>
      <!-- <el-card class="module-item custom-card" :body-style="{ padding: '20px' }"
        :style="{ background: 'Transparent', border: '1px solid rgb(0, 186, 255)' }">
        <div slot="header" class="module-title">网络状态: </div>
        <div class="module-value" :style="getNetworkStatusStyle()" style="border-color: blue;">
          {{ isNetworkConnected ? '已连接' : '未连接' }}
        </div>
      </el-card> -->

      <dv-border-box-10 :reverse="true"
        style="width: 250px; height: 120px; display: flex; justify-content: center; align-items: center;">
        <div class="module-item custom-card" :body-style="{ padding: '20px' }" :style="{ background: 'Transparent' }">
          <div slot="header" class="module-title" style="font-size: 1.2rem;">总数据量:</div>
          <div class="module-value">128条</div>
        </div>
      </dv-border-box-10>


      <!-- 实时数据卡片 -->
      <!-- <el-card class="module-item custom-card" :body-style="{ padding: '20px' }"
        :style="{ background: 'Transparent', border: '1px solid rgb(0, 186, 255)' }">
        <div slot="header" class="module-title">总的数据量</div>
        <div class="module-value">1024条</div>
      </el-card> -->

      <dv-border-box-10 :reverse="true"
        style="width: 250px; height: 120px; display: flex; justify-content: center; align-items: center;">
        <div class="module-item custom-card" :body-style="{ padding: '20px' }" :style="{ background: 'Transparent' }">
          <div slot="header" class="module-title" style="font-size: 1.2rem;">存储状态</div>
          <div class=" module-value">正常</div>
        </div>
      </dv-border-box-10>

      <!-- 存储状态卡片 -->
      <!-- <el-card class="module-item custom-card" :body-style="{ padding: '20px' }"
        :style="{ background: 'Transparent', border: '1px solid rgb(0, 186, 255)' }">
        <div slot="header" class="module-title">存储状态</div>
        <div class="module-value">正常</div>
      </el-card> -->
    </div>

  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'CenterCmp',
  data() {
    return {
      currentTime: '', // 当前时间
      cameraActive: false, // 摄像头状态
      loading: false, // 切换摄像头时的加载状态
      isNetworkConnected: navigator.onLine, // 网络连接状态
      isSystemRunning: false, // 系统运行状态
    };
  },
  mounted() {
    this.updateTime();
    setInterval(this.updateTime, 1000);

    // 监听网络状态变化
    window.addEventListener('online', this.updateNetworkStatus);
    window.addEventListener('offline', this.updateNetworkStatus);

    // 定期检查系统状态
    this.checkSystemStatus();
    setInterval(this.checkSystemStatus, 10000); // 每隔10秒检查一次
  },
  methods: {
    updateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const timePart = now.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false,
      });
      const weekday = now.toLocaleString('zh-CN', { weekday: 'long' });
      this.currentTime = `${year}年${month}月${day}日 ${timePart} ${weekday}`;
    },
    toggleCamera() {
      this.loading = true;
      const videoUrl = 'http://192.168.1.102:8084/?action=stream';
      window.open(videoUrl, '_blank');
      setTimeout(() => {
        this.loading = false; // 模拟加载结束
        this.cameraActive = !this.cameraActive;
      }, 2000);
    },
    refreshData() {
      this.$message({
        message: '数据已刷新!',
        type: 'success',
      });
    },
    getStatusStyle() {
      return {
        color: this.isSystemRunning ? 'rgb(26, 250, 41)' : 'red',
        fontWeight: 'bold',
      };
    },
    getNetworkStatusStyle() {
      return {
        color: this.isNetworkConnected ? 'rgb(26, 250, 41)' : 'red',
        fontWeight: 'bold',
      };
    },
    updateNetworkStatus() {
      this.isNetworkConnected = navigator.onLine;
    },
    checkSystemStatus() {
      // 这里假设后端提供的系统状态接口为 http://localhost:8086/data/findSourceAll
      // 您需要根据实际的后端接口进行调整
      axios.get('http://localhost:8086/data/findSourceAll')
        .then(response => {
          if (response.data != null) {
            this.isSystemRunning = true;
          }

        })
        .catch(error => {
          console.error('获取系统状态失败', error);
          this.isSystemRunning = false;
        });
    },
  },
  beforeDestroy() {
    // 移除事件监听器
    window.removeEventListener('online', this.updateNetworkStatus);
    window.removeEventListener('offline', this.updateNetworkStatus);
  },
};
</script>

<style lang="less">
.center-cmp {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.1);
  /* 透明背景 */
}

.cc-header {
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  /* 透明背景 */
}

.sp {
  font-size: 20px;
  color: rgb(231, 126, 41);
}

.time-display {
  font-size: 18px;
  color: rgb(14, 185, 197);
  text-align: center;
  margin: 5px 0;
  animation: fadeIn 2s;
  /* 添加渐变效果 */
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.camera-toggle {
  margin: 5px 0;
  transition: background-color 0.3s;
}

.video-container {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

video {
  width: 100%;
  height: 100%;
}

.module-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 80%;
  margin: 20px 0;
  gap: 20px;
  /* 添加此行以在所有子元素之间创建间距 */
}

.module-item {
  width: 45%;
  margin-bottom: 20px;
  /* 半透明背景 */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 自定义卡片样式 */
.custom-card .el-card__header {
  border-bottom: 1px solid rgb(0, 186, 255);

  /* 设置头部底部边框为蓝色 */
}

.module-title {
  font-size: 16px;
  color: rgb(251, 114, 147);
}

.module-value {
  margin-top: 10px;
  font-size: 1.2em;
  font-weight: bold;
  color: rgb(26, 250, 41);
}

.progress-bar {
  width: 80%;
  margin-top: 20px;
}

.extra-item {
  width: 45%;
}

.refresh-btn {
  margin-top: 20px;
}
</style>
